import * as React from 'react';
import { get } from '../../utils/request';
import { Topic } from '../../interface/index';
import TopicItem from '../../components/Topic';

export interface IProps { compiler: string; framework: string}

interface IState { data: Array<Topic> }

class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    get('/topics?limit=15').then((res) => this.setState({ data: res.data.data })).catch(err => alert(err));
  }
  render() {
    const { data } =  this.state;
    console.log(data);
    return (
      <div>
        {data.map((item: Topic) => (
          <TopicItem key={item.id} item={item} />
        ))}
      </div>
    );
  }
}

export default App;

